<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />	
		<title>Document</title>
		<link rel="stylesheet" href="css/1.css">
		<script src="https://unpkg.com/vue@next"></script>		
	</head>
	<body>
		<div id="app">
			<div class="item0" @click="counter += 1"><button>切换画面</button></div>
			<div class="item0" @click="persion.age += 1"><button>增加年龄</button></div>
			<div class="item0" @click="persion.age -= 1"><button>减少年龄</button></div>
			<span>年龄{{persion.age}}</span>
			<div v-if="counter%2==1" class="itme_icon">
				<img src="img/04-1.jpg" height="400" width="600"/>
			</div>			
			<div v-if="persion.age>=20" class="itme_icon">
				<img src="img/04-2.jpg"/>
			</div>		
		</div>
	</body>
	<script>
		const Counter = {
			data(){
				return{
					persion: {name:'小明',age:19,height:197},
					counter:0
				}
			},
			methods: {
				sum(){
					this.persion.age+=1	
				}
			},
			methods2: {
				sum1(){
					this.counter-=1	
				}
			}

		}
		Vue.createApp(Counter).mount('#app')
	</script>
</html>